import 'antd/dist/antd.css';
import './customPropertiesPanel.css';
import React, { Component } from 'react';
import { Form, Input, Collapse, Tabs, Card, Select, Table } from 'antd';
import ExecutingListener from './ExecutingListener';
import TaskListener from './TaskListener';
import SettingApprover from './SettingApprover';
import ServerType from './ServerType';
import PassCondition from './PassCondition';
import FormSetting from './FormSetting';
// import BasicInformation from './BasicInformation';

const { TabPane } = Tabs;
const { Panel } = Collapse;
/**
 * 自定义右侧属于栏
 */
class BsinPropertiesPanel extends Component {
  // ref获取数据域 需要的时候进行调用
  showNodeInfo = React.createRef();
  processForm = React.createRef();
  // id name $type
  state = {
    // 点击的元素
    currentElement: null,
    modeler: null,
    nodeInfo: null,
  };

  componentDidMount() {
    const { name, key, description } = this.props.editModel
      ? this.props.editModel
      : {};
    this.processForm.current.setFieldsValue({ name, key, description });
    setTimeout(() => {
      const { modeler } = this.props;
      // 点击事件
      // 这里有拖拽和点击 拖拽是空数组,点击才是有数字的数组
      // businessObject 取属性
      modeler.on('selection.changed', (e) => {
        if (e.newSelection.length > 0) {
          this.setState({ currentElement: null });
          // 多个数组,取第一个值
          const selectedElement = e.newSelection[0];
          this.setState({
            currentElement: selectedElement,
            nodeInfo: {
              name: '',
              ...selectedElement.businessObject,
            },
          });
          // 回显表格数据
          this.showNodeInfo.current.setFieldsValue({
            name: '',
            ...selectedElement.businessObject,
          });
        }
      });
      this.setState({
        modeler: modeler,
      });
    });
  }

  /**
   * 更新节点信息
   */
  handleNodeInfoOnName = () => {
    const { name } = this.showNodeInfo.current.getFieldsValue();
    this.updateLabel(name);
  };

  /**
   * 更新Label
   */
  updateLabel = (label) => {
    // label等于传递过来的值
    // console.log(this.state.currentElement);
    const modeling = this.props.modeler.get('modeling');
    modeling.updateLabel(this.state.currentElement, label);
  };

  render() {
    const { editModel } = this.props;
    const { currentElement, nodeInfo } = this.state;
    return (
      <div className="workflow-ui-propertiespanel">
        {/* tab切换 */}
        <Tabs defaultActiveKey="1" centered>
          <TabPane tab="基础信息" key="1">
            {/* <BasicInformation
              nodeInfo={nodeInfo}
              editModel={editModel}
              currentElement={currentElement}
              handleNodeInfoOnName={this.handleNodeInfoOnName}
            /> */}
            <Card type="inner" title="节点信息">
              <Form
                ref={this.showNodeInfo}
                name="basic"
                labelCol={{
                  span: 7,
                }}
                onFinish={this.handleNodeInfoOnName}
              >
                <Form.Item label="节点ID" name="id">
                  <Input disabled />
                </Form.Item>
                <Form.Item label="节点类型" name="$type">
                  <Input />
                </Form.Item>
                <Form.Item label="节点名称" name="name">
                  <Input onBlur={this.handleNodeInfoOnName} />
                </Form.Item>
              </Form>
            </Card>
            <Card type="inner" title="流程信息">
              <Form
                ref={this.processForm}
                name="basic"
                labelCol={{
                  span: 7,
                }}
              >
                <Form.Item label="模型名称" name="name">
                  <Input disabled />
                </Form.Item>
                <Form.Item label="Key" name="key">
                  <Input disabled />
                </Form.Item>
                <Form.Item label="描述" name="description">
                  <Input disabled />
                </Form.Item>
              </Form>
            </Card>
          </TabPane>
          <TabPane tab="基础设置" key="2">
            <Collapse accordion>
              {
                // 用户任务
                this.state.currentElement?.type == 'bpmn:UserTask' ? (
                  <>
                    <Panel header="执行监听器" key="1">
                      <ExecutingListener
                        currentElement={this.state.currentElement}
                        modeler={this.state.modeler}
                      />
                    </Panel>
                    <Panel header="任务监听器" key="2">
                      <TaskListener
                        currentElement={this.state.currentElement}
                        modeler={this.state.modeler}
                      />
                    </Panel>
                    <Panel header="审批人" key="3">
                      <SettingApprover
                        currentElement={this.state.currentElement}
                        modeler={this.state.modeler}
                      />
                    </Panel>
                  </>
                ) : // 服务任务
                this.state.currentElement?.type == 'bpmn:ServiceTask' ? (
                  <>
                    <Panel header="服务类型" key="3">
                      <ServerType
                        currentElement={this.state.currentElement}
                        modeler={this.state.modeler}
                      />
                    </Panel>
                    <Panel header="执行监听器" key="1">
                      <ExecutingListener
                        currentElement={this.state.currentElement}
                        modeler={this.state.modeler}
                      />
                    </Panel>
                  </>
                ) : // 流程线
                this.state.currentElement?.type == 'bpmn:SequenceFlow' ? (
                  <PassCondition
                    currentElement={this.state.currentElement}
                    modeler={this.state.modeler}
                  />
                ) : null
              }
              {this.state.currentElement?.type == 'bpmn:UserTask' ||
              this.state.currentElement?.type == 'bpmn:StartEvent' ? (
                <Panel header="表单绑定" key="4">
                  <FormSetting
                    currentElement={this.state.currentElement}
                    modeler={this.state.modeler}
                  />
                </Panel>
              ) : null}
            </Collapse>
          </TabPane>
        </Tabs>
      </div>
    );
  }
}

export default BsinPropertiesPanel;
